import React, { Component } from 'react'

export default class App extends Component {
  state={
    uname:""
  }

  f1 = (e)=>{
    this.setState({uname:e.target.value})
  }

  /*
    非受控组件:
      由于表单项只能被用户控制 或 被数据绑定项控制,只能二选一
      所以 非受控组件方案 选择 由用户控制控制表单项
      则,不能直接将数据绑定项绑定到表单数据项上
      此时可以在表单数据项发生变化时触发事件
      事件触发函数,在函数中修改数据绑定项,从而改变数据绑定项的值
  */
  render() {
    return (
      <>
        <h2>非受控组件 - 用户可以随意操作表单项</h2>
        <input 
          placeholder='请输入登录名称' 
          onChange={this.f1}
        ></input>
        <h3>您的名字是:{this.state.uname}</h3>
      </>
    )
  }
}
